<template>
  <div>
    <div class="box">
      <el-form :model="queryForm" ref="queryRef">
        <el-row>
          <el-col :span="6">
            <el-form-item label="课程名称：" prop="cur_name">
              <el-input v-model.trim="queryForm.cur_name" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-button @click="getClassPlanList(null)" :loading="searchLoading" type="primary">
              <icons name="search"></icons>
              搜索
            </el-button>
            <el-button @click="reset()">
              <icons name="reset"></icons>
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="container">
      <el-button type="primary" @click="showEdit(undefined)" style="margin-bottom: 10px">+ 新增计划</el-button>
      <el-table :data="tableData" v-loading="tableLoading" border style="width: 100%">
        <el-table-column prop="cur_name" label="课程名称" width="280" align="center" header-align="center" />
        <el-table-column prop="tea_name" label="上课教师" width="180" align="center" header-align="center" />
        <el-table-column prop="start_weeks" label="开始周次" width="80" align="center" header-align="center" />
        <el-table-column prop="end_weeks" label="结束周次" width="80" align="center" header-align="center" />
        <el-table-column label="上课时间" width="280" align="center" header-align="center">
          <template #default="{ row }">
            <p v-for="(item) in row.classTimeList">{{ `周${item.week} 第${item.start_class}节~第${item.end_class}节`
            }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="class_room" label="教室" width="180" align="center" header-align="center">
          <template #default="{ row }">
            <p v-for="item in row.classTimeList" :key="item">
              {{ item.class_room }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center" header-align="center">
          <template #default="{ row }">
            <el-button type="text" @click="showEdit(row)">编辑</el-button>
            <el-button type="text" @click="deletePlan(row.id, row.cur_name, row.cur_code)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="paging">
        <el-pagination layout="total, sizes,prev,pager,next,jumper" :page-size="queryForm.pageSize"
          :page-sizes="[10, 20, 30, 40, 50]" :total="total" :current-page.sync="queryForm.page"
          @current-change="hCurrentChange" @size-change="hSizeChange" />
      </div>
    </div>
    <editSchedule :valueShow="editScheduleShow" :scheduleInfo="editScheduleRow" @closeEditSchedule="closeEditSchedule" />
  </div>
</template>
<script lang="ts">
import { pageClassPlanList, deleteClassPlan } from '@/api/teaching/course-plan'
import { defineComponent, reactive, ref } from 'vue'
import editSchedule from './components/editSchedule.vue'
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElMessage, ElMessageBox } from 'element-plus'
export default defineComponent({
  setup(props) {
    const { proxy } = useCurrentInstance()
    const tableLoading = ref(false)
    const searchLoading = ref(false)
    const total = ref(0)
    const queryRef: any = ref(null)
    const queryForm = reactive({
      cur_name: null,
      page: 1,
      pageSize: 10,
    })
    const tableData = ref([])
    const editScheduleShow = ref(false)
    const editScheduleRow = ref(null)

    // 展示编辑排课弹框
    const showEdit = (row) => {
      row && (editScheduleRow.value = row)
      editScheduleShow.value = true
    }

    // 关闭排课弹框
    const closeEditSchedule = (flag) => {
      editScheduleShow.value = false
      editScheduleRow.value = null
      flag && getClassPlanList(null)
    }

    // 分页数据查询
    const getClassPlanList = (page) => {
      page && (queryForm.page = page)
      searchLoading.value = true
      tableLoading.value = true
      pageClassPlanList(queryForm)
        .then((res: any) => {
          total.value = res.data.total
          tableData.value = res.data.list
        })
        .finally(() => {
          searchLoading.value = false
          tableLoading.value = false
        })
    }

    // 删除计划
    const deletePlan = (id, name, code) => {
      ElMessageBox.confirm(`确定删除【${name}】当前节次的计划吗？`, '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          tableLoading.value = true
          deleteClassPlan({ id, code })
            .then((res: any) => {
              getClassPlanList(null)
              ElMessage.success(res.message)
            })
            .finally(() => {
              tableLoading.value = false
            })
        })
        .catch(() => { })
    }

    // 重置方法
    const reset = () => {
      queryRef.value.resetFields()
    }

    const hCurrentChange = (val) => {
      queryForm.page = val
    }

    const hSizeChange = (val) => {
      queryForm.pageSize = val
    }

    /**
     * 方法调用区
     */
    getClassPlanList(null)

    return {
      total,
      queryForm,
      editScheduleShow,
      editScheduleRow,
      tableLoading,
      searchLoading,
      tableData,
      queryRef,
      hCurrentChange,
      hSizeChange,
      closeEditSchedule,
      showEdit,
      deletePlan,
      getClassPlanList,
      reset,
    }
  },
  components: { editSchedule },
})
</script>
<style></style>
